<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { RouterView, useRouter } from 'vue-router'
import myaxios from '@/Axios/myaxios'

const router = useRouter()
const formLabelAlign = ref({
  phone: '',  // 修改为手机号码字段
  password: '',
})

const rules = ref({
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^[1][3-9]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码至少 6 个字符', trigger: 'blur' }
  ]
})

// 使用reactive创建包含相关属性的响应式对象
const state = reactive({
  labelPosition: 'left',
  itemLabelPosition: 'top'
});

// 获取form实例
const formRef = ref(null)

const handleLogin = () => {

console.log(formLabelAlign.value.phone)

      myaxios.post('/api/user/login', {
        userAccount: formLabelAlign.value.phone,
        userPassword: formLabelAlign.value.password
      })
        .then((response) => {
          console.log('后端返回的完整响应数据：', response); // 添加这行打印完整响应
          console.log('后端返回的数据部分：', response.data); // 或者添加这行只打印data部分
          if (response.data ) {
            router.push('/order');
            ElMessage.success('登录成功!');
          } else {


              ElMessage.error('登录失败，服务器返回数据异常，请稍后再试');

          }
        })
        .catch((error) => {
          ElMessage.error('登录请求出错，请稍后再试');
          console.error('登录请求出错：', error);
        });


}
</script>

<template>
  <div class="login">
    <img class="logo" src="@/assets/image/logo.png" alt="logo" />

    <div class="content">
      <div class="left">
        <h1>登录您的账号</h1>
        <el-form :label-position="state.labelPosition" label-width="auto" :model="formLabelAlign" :rules="rules"
                 ref="formRef">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="formLabelAlign.phone" placeholder="请输入手机号" clearable class="input-field" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" placeholder="请输入密码" autocomplete="off" show-password
                      v-model="formLabelAlign.password" class="input-field" />
          </el-form-item>
          <el-form-item class="remember">
            <el-checkbox label="记住我" value="Value A" />
            <span>忘记密码?</span>
          </el-form-item>
          <el-button type="primary" @click="handleLogin">登录</el-button>
          <h5>其它方式登录</h5>
          <div class="fs">
            <div class="qt">
              <cp-icon name="login-手机号"></cp-icon>
              <span>手机号</span>
            </div>
            <div class="qt">
              <cp-icon name="login-支付宝"></cp-icon>
              <span>支付宝</span>
            </div>
          </div>
          <div>
            <p>没有账号？<router-link to="/register">点击这里注册</router-link></p>
          </div>
        </el-form>
      </div>
      <div class="right">
        <img src="@/assets/image/login.png" alt="login image" />
      </div>
    </div>
  </div>

  <router-view />
</template>


<style lang='scss' scoped>
.login {
  padding: 80px;

  .logo {
    margin-left: 205px;
  }

  .content {
    min-width: 1615px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 600px;
    // border: 1px solid black;
    margin: 0 auto;
    margin-top: 50px;

    .left {
      flex: 0.4;
      padding-left: 200px;
      box-sizing: border-box;

      h1 {
        font-weight: 300;
      }

      h5 {
        color: #c2b5b5;
        font-weight: 300;
      }

      .el-form-item {
        height: 60px;
        border-radius: 20px!important;

        .el-input {
          height: 100%;
          background: #fafafa!important;
          border-radius: 10px;
        }
      }

      .remember {
        display: flex!important;
        justify-content: space-between;
        width: 100%;

        span {
          margin-left: calc(100% - 25%);
        }
      }

      .el-button {
        width: 100%;
        height: 50px;
        font-size: 18px;
        background: #86d7b0;
        border: none;
        border-radius: 10px;
      }

      h5 {
        text-align: center;
        font-size: 15px;
      }

      .fs {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;

        .qt {
          display: flex;
          align-items: center;
          padding: 15px 55px;
          border: 1px solid #eee;
          border-radius: 10px;

          span {
            margin-left: 20px;
          }

          .cp-icon {
            margin-right: 20px;
          }
        }
      }
    }

    .right {
      flex: 0.6;
      text-align: center;

    }
  }
}
</style>
